<section style="width:300px;margin-left:10px;margin-right:10px">
	<h2>Daftar GRATIS !</h2>
	<hr />
	<br />
	<div class="success" style="display:none">Success</div>
	<div class="error" style="display:none">Error</div>
	<form id="signup" action="<?php echo base_url()."home/daftar"?>" class="styled" method="post" >	
		<label for="tempat">Nama Lengkap</label>
		<input class="textbox validate[required]" type="text"  id="nama" name="data[nama]" />
		
		<label for="tempat">Username</label>
		<input class="textbox validate[required]" type="text"  id="username" name="data[username]" />
		
		<label for="tempat">Email</label>
		<input class="textbox validate[required, custom[email]]" type="text"  id="email" name="data[email]" />
		
		<label for="tempat">Password</label>
		<input class="textbox validate[required]" type="password"  id="password" name="data[password]" />
		
		<label for="tempat">Jenis Kelamin</label>
		<select class="textbox" id="jns" name="data[jenis_kelamin]">
			<option value="L" >Laki-Laki</option>
			<option value="P" >Perempuan</option>
		</select>
		
		<input type="submit" value="DAFTAR" class="button" />
	</form>	
</section>
<script>
$(document).ready(function(){
	$("#signup").validationEngine();

	$("#signup").submit(function(){
		if($(this).validationEngine('validate')){
			var formInput = $(this).serialize();
			
			$.ajax({
				url: $(this).attr('action'),
				data: formInput,
				beforeSend : function(){
					$.fancybox.showActivity();
					$(".error").hide();
				},
				success: function(respon){
					var obj = jQuery.parseJSON(respon);
					if(obj.status == 'success'){
						$(".success").text(obj.msg);
						$(".success").fadeIn(1000);
					}else{
						$(".error").text(obj.msg);
						$(".error").fadeIn(1000);
					}
					
					$.fancybox.hideActivity();
				},
				type: "POST"
			});
		}
		return false;
	});
})
</script>